<template>
  <el-container class="layout-main">
      <!-- 提测需注释 -->
      <el-aside width="200px" style="text-align: left; overflow-y: auto; overflow-x: hidden; height: 100%">
          <el-menu :default-active="menuActive" class="menu-main">
              <Menu :menuData="menuData" :menuActive="menuActive"></Menu>
          </el-menu>
      </el-aside>
      <el-main class="content" >
          <router-view></router-view>
      </el-main>
  </el-container>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      menuActive: '0-0',
      menuData: [{
        title: '基础用例',
        activeIndex: '0',
        children: [{
          title: '要素',
          path: '/baseFactor',
          activeIndex: '0-0'
        }, {
          title: '艺术字',
          path: '/fonts',
          activeIndex: '0-1'
        }, {
          title: '棋盘',
          path: '/chess',
          activeIndex: '0-2'
        }, {
          title: '阴影',
          path: '/lightShadow',
          activeIndex: '0-3'
        }, {
          title: '动画小球',
          path: '/animationBall',
          activeIndex: '0-4'
        }]
      }]
    }
  },
  components: {
    Menu: () => import('@/components/Menu')
  }
}
</script>
<style lang="less" scoped>
  // 容器内部 
  .layout-main{
    height: calc(100vh - 68px);
  }
  // .content{
  //   width: 100%;
  //   height: 100%;
  // }
</style>
